@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-panel-background: #1e1e1e;
  --color-solid-resize-bar-handle: #2d3748;
}

.zoompanflow {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
  height: 100%;
}

.zoompanflow .reactflow-wrapper {
  flex-grow: 1;
}

@media screen and (min-width: 768px) {
  .zoompanflow {
    flex-direction: row;
  }
}

.react-flow__controls-button {
  background: #1a202c !important;
  border-bottom: 1px solid #2d3748 !important;
  color: white !important;
  fill: white !important;
}

.react-flow__panel {
  @apply border-brand-dark overflow-hidden rounded-lg border-[1px];
  margin: 5px !important;
  padding: 0px !important;
}

.react-flow__attribution {
  font-size: 10px;
  background: #1a202c !important;
  padding: 0 4px !important;
}

.react-flow__node.selected > div {
  @apply border-slate-900 dark:border-white;
}

.dots {
  background: linear-gradient(180deg, transparent 0, #f1f5f9 300px),
    fixed 0 0 /20px 20px radial-gradient(#6b6b6b 1px, transparent 0),
    fixed 10px 10px /20px 20px radial-gradient(#6b6b6b 1px, transparent 0);
}

.dark .dots {
  background: linear-gradient(180deg, transparent 0, #161616 300px),
    fixed 0 0 /20px 20px radial-gradient(#6b6b6b 1px, transparent 0),
    fixed 10px 10px /20px 20px radial-gradient(#6b6b6b 1px, transparent 0);
}
